<script setup lang="ts">
import {onMounted, ref} from "vue";
import {NAMESPACE_USER} from "../../interface/user.ts";
import {deletePermission, queryPermission} from "../../api/user.ts";
import {ElTable} from "element-plus";
import {messageTip, MessageTipType} from "../../util/common.ts";
import {CommonModel} from "../../interface/commonModel.ts";
import UserPermissionUpdate from "./UserPermissionUpdate.vue";
import UserPermissionAdd from "./UserPermissionAdd.vue";
import DelDialog from "../DelDialog.vue";


const permissionList = ref<Array<NAMESPACE_USER.PermissionItem>>([])
const pageInfo = ref<CommonModel.PageInfo>({
  pageSize:10,
  pageNo:1,
  total:0,
})

const currentPermission = ref<NAMESPACE_USER.PermissionItem>({})
const dialogUpdateFormVisible = ref<boolean>(false)
const dialogAddFormVisible = ref<boolean>(false)
const dialogDelFormVisible = ref<boolean>(false)
const selectedIds = ref<Array<number>>([])

const queryPermissionList = () => queryPermission({
  pageNo:pageInfo.value.pageNo,
  pageSize:pageInfo.value.pageSize
})

onMounted(() => {
  queryPermissionList().then(data => {
    permissionList.value = data.data
    pageInfo.value.total = data.pageInfo.total
  })
})

const handleEditClick = (permission: NAMESPACE_USER.PermissionItem) => {
  currentPermission.value = permission;
  dialogUpdateFormVisible.value = true
}

const handleAddClick = () => {
  dialogAddFormVisible.value = true
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const handleDelClick=(id?:number)=>{
  selectedIds.value=[]
  if (typeof(id) == "number"){
    selectedIds.value.push(id)
  }
  for (let i = 0; i < multipleTableRef.value.getSelectionRows().length; i++) {
    selectedIds.value.push(multipleTableRef.value.getSelectionRows()[i].id)
  }
  if (selectedIds.value.length === 0){
    messageTip("至少选择一条删除",MessageTipType.ERROR)
  }
  dialogDelFormVisible.value =true
}


const handleSelectionChange =()=>{
  selectedIds.value=[]
  for (let i = 0; i < multipleTableRef.value.getSelectionRows().length; i++) {
    selectedIds.value.push(multipleTableRef.value.getSelectionRows()[i].id)
  }
}

const closeDialog = (success:boolean)=>{
  currentPermission.value = {};
  dialogUpdateFormVisible.value = false
  dialogAddFormVisible.value = false
  dialogDelFormVisible.value = false
  selectedIds.value=[]
  if (success){
    queryPermissionList().then(data => {
      permissionList.value = data.data
      pageInfo.value.total = data.pageInfo.total
    })
  }
}

const stateFormat = (row: NAMESPACE_USER.PermissionBase) => {
  if (row.state === -1) {
    return '锁定状态'
  } else if (row.state === 0) {
    return '初始状态'
  } else if (row.state === 1 ) {
    return '正常状态'
  } else {
    return '异常状态'
  }
}

const handlePageChange = (currentPage:number)=>{
  pageInfo.value.pageNo = currentPage
  queryPermissionList().then(data => {
    permissionList.value = data.data
    pageInfo.value.total = data.pageInfo.total
  })
}

const handleSizeChange = (currentPageSize:number)=>{
  pageInfo.value.pageSize = currentPageSize
  queryPermissionList().then(data => {
    permissionList.value = data.data
    pageInfo.value.total = data.pageInfo.total
  })
}
const selectable = (row: NAMESPACE_USER.PermissionItem)=>{
  return row.parentId != 0;
}

</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" @click="handleAddClick">添加</el-button>
        <el-button type="danger" @click="handleDelClick" :disabled="selectedIds.length === 0">删除</el-button>
      </div>
    </template>
    <el-table :data="permissionList" sele ref="multipleTableRef" @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column type="selection" width="30" :selectable="selectable" />
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="name" label="权限名称"/>
      <el-table-column prop="id" label="权限id"/>
      <el-table-column prop="parentId" label="父权限id"/>
      <el-table-column prop="code" label="编号"/>
      <el-table-column prop="state" :formatter="stateFormat" label="状态"/>
      <el-table-column prop="intro" label="描述"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <div>
            <el-button type="warning" v-if="scope.row.parentId != 0"  round @click="handleEditClick(scope.row)">编辑</el-button>
            <el-button type="danger" v-if="scope.row.parentId != 0" round @click="handleDelClick(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div style="float: right;padding-bottom: inherit">
        <el-pagination
            :current-page="pageInfo.pageNo"
            :page-size="pageInfo.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :small="false"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
      </div>
    </template>
  </el-card>

  <user-permission-add @closeDialog="closeDialog" :dialog-form-visible="dialogAddFormVisible" v-if="dialogAddFormVisible"/>
  <user-permission-update @closeDialog="closeDialog" :current-permission="currentPermission" :dialog-form-visible="dialogUpdateFormVisible" v-if="dialogUpdateFormVisible"/>
  <del-dialog @closeDialog="closeDialog" :del-func="deletePermission"  :dialog-visible="dialogDelFormVisible" :ids="selectedIds" message="确定删除角色吗?" tips="删除角色" v-if="dialogDelFormVisible"/>
</template>

<style scoped>

</style>